<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes test {
  from { --x: green; }
  to { --x: lime; }
}
div {
  --x: red;
  --y: var(--x);
  background-color: var(--y);
}
#targetA {
  animation: test 10s -2.5s;
}
#targetB {
  animation: test 10s -7.5s;
}
</style>
<div id="targetA"></div>
<div id="targetB"></div>
<script>
test(() => {
  assert_equals(getComputedStyle(targetA).getPropertyValue('--y'), '  green');
  assert_equals(getComputedStyle(targetB).getPropertyValue('--y'), '  lime');
}, 'CSS Animations on var() chained custom properties should be applied');

test(() => {
  assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 128, 0)');
  assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 255, 0)');
}, 'CSS Animations on var() chained custom properties should be reflected in var() references');
</script>
